import { Card, Form, Input, Button} from 'antd'
import logo from "@/assets/logo.png"
import "./index.scss"
import { useNavigate } from 'react-router-dom'
import useStore  from '@/store'
import { useEffect } from 'react'
const Login = () => {
  const {token,fetchLogin } = useStore()
  //路由跳转
  const navigate=useNavigate();
  //提交表单数据，获取返回数据，修改store中的存储数据
  const onFinish = async (values) => {
    await fetchLogin(values)
    navigate('/')
  }
  useEffect(() => {
    if (token) {
      console.log(token);
    }
  }, [token]); // 监听 token 的变化
  return (
    <div className="login">
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt="" />
        <Form onFinish={onFinish} validateTrigger={["onBlur"]}>
          <Form.Item name="mobile"     rules={[
      { required: true, message: '请输入手机号!' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
    ]}>
            <Input placeholder="请输入手机号" size="large" />
          </Form.Item>
           <Form.Item name='password'   rules={[
    { required: true, message: '请输入密码' },
    { min: 3, message: '密码至少需要3个字符' },
    { max: 6, message: '密码最多6个字符' },
  ]}>
            <Input placeholder="请输入密码" size='large' />
          </Form.Item>
          <Form.Item>
            <Button type="primary" size="large" htmlType='submit' block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
